<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./sdk/sdk.min.js"></script>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="page">
    <div class="content">
      <div class="mainpage" id="mainpage">
        <div class="title">
          <div class="title-text">
            空调遥控
          </div>
        </div>
        <div class="environment">
          <div class="environment-tem">
            <div>室内温度:</div>
          </div>
          <div class="environment-tem-val" id="inner-tempre">
            <div>--℃</div>
          </div>
          <div class="environment-hum">
            <div>空气湿度:</div>
          </div>
          <div class="environment-hum-val" id="inner-hum">
            <div>--%</div>
          </div>
        </div>
        <div class="tempreture-sheet">
          <div class="tempre" id="tempre_sheet">
            <div id="tempre_text" onclick="onInputTempreture(event)">25</div>
          </div>
          <div class="temp-rest">
            <div class="temp-space"></div>
            <div class="sign"> ℃</div>
            <div class="temp-space"></div>
            <div class="model-sheet">
              <div class="icon-sheet">
                <div class="icon" id="modelid"></div>
              </div>
              <div class="icon-text">
                <div id="modeltext">自动</div>
              </div>
            </div>
          </div>
        </div>
        <div class="space"></div>
        <div class="setmodel">
          <div class="setmodel-sheet">
            <div class="setmodel_sheet">
              <div class="setmodel-icon" id="model-speed"></div>
              <div class="setmodel-text" id="text-speed">
                <div> 风速 低</div>
              </div>
            </div>
          </div>
          <div class="setmodel-sheet">
            <div class="setmodel_sheet">
              <div class="setmodel-icon" id="model-timeset"></div>
              <div class="setmodel-text" id="sheet-timeset">
                <div id="restTime"> --:--</div>
              </div>
            </div>
          </div>
          <div class="setmodel-sheet">
            <div class="setmodel_sheet">
              <div class="setmodel-icon" id="model-windtype"></div>
              <div class="setmodel-text" id="text-windtype">
                <div> 手动扫风</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="controlpage">
        <div class="button-sheet">
          <div class="switch" id="openswitch" onclick="openSwitch(event)">
            <div class="switch-icon-sheet">
              <div class="switch-icon" id="switchicon"></div>
            </div>
          </div>
          <div class="model" id="openmodel" onclick="openModel(event)">
            <div class="control-model">模式</div>
          </div>
        </div>
        <div class="button-sheet">
          <div class="one-third-edge" id="speed" onclick="openWindSpeed(event)">
            <div class="one-third-text">风速</div>
          </div>
          <div class="one-third-middle" id="power" onclick="openPower(event)">
            <div class="one-third-text">强劲</div>
          </div>
          <div class="one-third-edge" id="sweep" onclick="openSweep(event)">
            <div class="one-third-text">扫风</div>
          </div>
        </div>
        <div class="button-sheet">
          <div class="one-third" id="-" onclick="openDecrease(event)">
            <div class="decrease-text">-</div>
          </div>
          <div class="one-third">
            <div class="tempreture-text">温度</div>
          </div>
          <div class="one-third" id="+" onclick="openIncrease(event)">
            <div class="increase-text">+</div>
          </div>
        </div>
        <div class="button-sheet">
          <div class="one-third-edge" id="timeset" onclick="openTimeSet(event)">
            <div class="one-third-text">定时</div>
          </div>
          <div class="one-third-middle" id="light" onclick="openLight(event)">
            <div class="one-third-text">灯光</div>
          </div>
          <div class="one-third-edge" id="setting" onclick="openSetting(event)">
            <div class="one-third-text">设置</div>
          </div>
        </div>
      </div>
    </div>
    <div class="gray" id="gray">
      <div class="setTimeBox">
        <div class="TimeBox">
          <div class="setTime-space-left">
            <div class="setTime-sigle" id="decreaseHour" onclick="decreaseHour(event)">-</div>
          </div>
          <div class="setTime"><input type="number" placeholder="12" class="setTime-sheet" onblur="updateHour(event)"
              id="inputHour"></input></div>
          <div class="setTime-space-right">
            <div class="setTime-sigle" id="increaseHour" onclick="increaseHour(event)">+</div>
          </div>
          <div class="setTime_m">
            <div class="setTime_m-sheet">:</div>
          </div>
          <div class="setTime-space-left">
            <div class="setTime-sigle" id="decreaseMin" onclick="decreaseMin(event)">-</div>
          </div>
          <div class="setTime"><input type="number" placeholder="00" class="setTime-sheet" onblur="updateMin(event)"
              id="inputMin"></input></div>
          <div class="setTime-space-right">
            <div class="setTime-sigle" id="increaseMin" onclick="increaseMin(event)">+</div>
          </div>
        </div>
        <div class="confirm-sheet">
          <div class="confirm-button" onclick="ConfirmTime(event)">确认</div>
        </div>
      </div>
    </div>
    <div class="setting-content" id="setting-page">
      <div class="setting-title-sheet">
        <div class="title">设置</div>
      </div>
      <div class="settings">
        <div class="setting-space-sheet"></div>

        <div class="setting-sheet">
          <div class="setting-name-space"></div>
          <div class="setting-name">是否启用离开自动关闭</div>
          <input type="radio" id="OnautoClose" name="open" value="open" class="interval-switch" onclick="openInterval(event)">是
          <input type="radio" id="OffautoClose" name="open" value="close" class="interval-switch" checked onclick="closeInterval(event)">否
        </div>
        <div class="setting-sheet" id="inputInterval">
          <div class="setting-name-space"></div>
          <div class="setting-name" style="width: 30%">间隔时间</div>
          <input class="input-setting-interval" type="number" list="interval-list" id="input-setting-interval"
            placeholder="30" onblur="closeInputInterval(event)">
          <datalist id="interval-list">
            <option>60</option>
            <option>50</option>
            <option>40</option>
            <option>30</option>
            <option>20</option>
            <option>10</option>
          </datalist>
          <div class="setting-name-space"></div>
          <div class="setting-name-space" style="font-size: 3vh">Min</div>
        </div>

        <div class="setting-space-sheet"></div>

        <div class="setting-sheet">
          <div class="setting-name-space"></div>
          <div class="setting-name">开机是否自动关窗</div>
          <input type="radio" id="OnopenClose" name="window" value="open" class="interval-switch" onclick=OnopenClose(event)>是
          <input type="radio" id="OffopenClose" name="window" value="close" class="interval-switch" checked onclick="OffopenClose(event)">否
        </div>

        <div class="setting-space-sheet"></div>

        <div class="setting-sheet">
          <div class="setting-name-space"></div>
          <div class="setting-name">是否启用温度阈值</div>
          <input type="radio" id="ongate" name="tempre" value="open" class="tempre-switch" onclick="openTempre(event)">开启
          <input type="radio" id="offgate" name="tempre" value="close" class="tempre-switch" checked onclick="closeTempre(event)">关闭
        </div>
        <div class="setting-sheet" id="inputTempre">
          <div class="setting-name-space"></div>
          <div class="setting-name" style="width: 30%">上限温度</div>
          <input class="input-setting-interval" type="number" list="tempre-list" id="input-high-tempre" placeholder="30"
            onblur="closeHighTempre(event)">
          <datalist id="tempre-list">
            <option>33</option>
            <option>32</option>
            <option>31</option>
            <option>30</option>
            <option>29</option>
            <option>28</option>
          </datalist>
          <div class="setting-name-space" style="font-size: 3vh">℃</div>
        </div>
        <div class="setting-sheet" id="inputLowTempre">
          <div class="setting-name-space"></div>
          <div class="setting-name" style="width: 30%">下限温度</div>
          <input class="input-setting-interval" type="number" list="tempre-low-list" id="input-low-tempre"
            placeholder="10" onblur="closeLowTempre(event)">
          <datalist id="tempre-low-list">
            <option>13</option>
            <option>12</option>
            <option>11</option>
            <option>10</option>
            <option>9</option>
            <option>8</option>
          </datalist>
          <div class="setting-name-space" style="font-size: 3vh">℃</div>
        </div>

        <div class="setting-space-sheet"></div>

        <div class="setting-sheet" onmouseover="inputWindow(event)">
          <div class="setting-name-space"></div>
          <div class="setting-name" style="width: 30%">窗户开启程度</div>
          <input type="range" id="windowRange" style="width: 62%" min="0" max="100" value="0"
            onchange="inputWindow(event)">
        </div>

        <div class="setting-space-sheet"></div>
  
        <div class="setting-sheet">
          <div class="setting-name-space"></div>
          <div class="setting-name" style="width: 30%">报警等级阈值</div>
          <input type="radio" id="alert_1" name="alert" class="interval-switch" onclick=Alert_1(event)>1
          <input type="radio" id="alert_2" name="alert" class="interval-switch" onclick=Alert_2(event)>2
          <input type="radio" id="alert_3" name="alert" class="interval-switch" checked onclick=Alert_3(event)>3
          <input type="radio" id="alert_4" name="alert" class="interval-switch" onclick=Alert_4(event)>4
          <input type="radio" id="alert_5" name="alert" class="interval-switch" onclick=Alert_5(event)>5
        </div>
        <!--按需添加-->
      </div>
    </div>
    <div class="return" id="return-sheet">
      <div class="return-sheet" id="return" onclick="returnIndex(event)">
        <div class="return-icon"></div>
      </div>
    </div>

    <div class="alert" id="alert">Alert</div>
  </div>
  </div>
</body>
<script src="./js/socket.io.js"></script>
<script src="./js/index.js"></script>

</html>